<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>我的购物车</title>
    <link rel="stylesheet" href="css/shopping.css">
    <style>
        #cartList{
            display: none;
        }
        #cartList .cartOver{
            background-color: #fff;
            z-index: 100;
            border-bottom: none;
        }
        #cartList .cartOut{
            background-color: #f9f9ff;
            border-bottom: solid 1px #dcdcdc;
        }
    </style>
</head>
<body>
<section id="shopping">
    <div id="cart" onmouseover="over()" onmouseout="out()">我的购物车<span>1</span></div>
    <div id="cartList">
        <h2>最新加入的商品</h2>
        <ul>
            <li><img src="images/makeup.jpg"></li>
            <li>倩碧经典三部曲套装（液体皂200ml+明肌2号水200ml+润肤乳125ml）</li>
            <li>¥558.00×1<br/>删除</li>
        </ul>
        <div class="footer">共1件商品<span>共计¥558.00</span> <span>去购物车</span></div>
    </div>
</section>
<script>
    document.getElementById("cartList").style.display="none";
    // function over(){
    //     // 鼠标移入
    //      document.getElementById("cartList").style.display="block";
    //      document.getElementById("cartList").style.top="-1px";
    //      document.getElementById("cartList").style.position="relative";
    //      document.getElementById("cart").style.backgroundColor="#fff";
    //      document.getElementById("cart").style.zIndex="100";
    //      document.getElementById("cart").style.borderBottom="none";

    // }
    // function out(){
    //     // 鼠标移出
    //      document.getElementById("cartList").style.display="none";
    //      document.getElementById("cart").style.backgroundColor="#f9f9f9";
    //      document.getElementById("cart").style.borderBottom="solid 1px #dcdcdc";



    // }
    
</script>
<script>
    // className属性
    function over(){
        document.getElementById("cart").className="cartOver";
    }
    function out(){
          document.getElementById("cart").className="cartOut"
    }
</script>

</body>
</html>